<template>
  <div id="page-postHelp">
    <el-col>
      <el-card
        shadow="never"
        v-for="(item, index) in initTag"
        v-loading="loading"
        :id="'tag-' + index"
      >
        <h2>
          {{ item.title }}

          <el-link
            type="danger"
            style="float: right;"
            @click="deleteTag(item, index)"
          >
            <i class="el-icon-delete"></i>
            删除
          </el-link>
        </h2>
        <div class="time">{{ item.post_time }}</div>
        <div>
          {{ item.content }}
          <img class="item-img" :src="item.img" alt="" v-if="item.img" />
        </div>
        <div class="item-comment">
          <el-link style="float: right;" @click="deleteTag(item, index)">
            <i class="el-icon-delete"></i>
            点击展开评论
          </el-link>
          <comment></comment>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import comment from '@/components/Comment'
export default {
  components: { comment },
  data() {
    return {
      loading: false,
      initTag: [
        {
          id: 1,
          title: '求助！紧急！',
          content: '五个月的孩子发烧了，求儿童食用的退烧药...像这种',
          comment_list: [
            {
              id: 1,
              uname: '张三',
              avatar:
                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
              comment: '我家有，你哪个社区的？我是3期的，近的话我给你送过去',
              time: '2022-10-5 10:26:23',
              children: [
                {
                  id: 2,
                  uname: '李四',
                  avatar:
                    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                  comment: '我也是3期的，你现在有空吗？我立马过去找你？',
                  time: '2022-10-5 10:26:40',
                },
                {
                  id: 2,
                  uname: '张三',
                  avatar:
                    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                  comment: '好的，我在电梯口等你',
                  time: '2022-10-5 10:27:40',
                },
              ],
            },
          ],
          commentLen: 3,
          status: '1',
          post_time: '2022-10-5 10:25:42',
          post_category_id: '1',
          browse_count: '256',
          plate_name: '求助板块',
          img:
            'https://tse2-mm.cn.bing.net/th/id/OIP-C.EZ51apekKIzn7jFyyMZ8vAHaHa?pid=ImgDet&rs=1',
        },
      ],
      showTag: [],
    }
  },
  methods: {
    // 请求删除操作
    deleteOption() {
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    deleteTag(item, index) {
      console.log(index)
      this.$confirm('此操作将永久删除该求助, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let del = item.id
          this.deleteOption()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 发送
    doSend(text) {
      console.log('dosend')
      console.log(text)
      // this.$http({
      //   url: this.$http.adornUrl(`/generator/notecomment/save`),
      //   method: 'post',
      //   data: this.$http.adornData({
      //     noteId: this.dataForm.id || undefined,
      //     context: text,
      //   }),
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     this.commentQuery(this.dataForm.id)
      //   } else {
      //     this.$message.error(data.msg)
      //   }
      // })
    },
    doChidSend(text, targetUserId, parentId) {
      console.log('dosend')
      console.log(text + targetUserId, parentId)
      // this.$http({
      //   url: this.$http.adornUrl(`/generator/notecomment/save`),
      //   method: 'post',
      //   data: this.$http.adornData({
      //     context: text,
      //     targetUserId: targetUserId,
      //     replyId: parentId,
      //   }),
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     this.commentQuery(this.dataForm.id)
      //   } else {
      //     this.$message.error(data.msg)
      //   }
      // })
    },

    commentQuery(id) {
      console.log('hello', id)
      this.dataForm.id = id || 0
      console.log('hello', id)
      this.visible = true
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          // this.$http({
          //   url: this.$http.adornUrl(
          //     `/generator/notecomment/listByNoteId/${this.dataForm.id}`,
          //   ),
          //   method: 'get',
          //   params: this.$http.adornParams(),
          // }).then(({ data }) => {
          //   if (data && data.code === 0) {
          //     this.commentList = data.list
          //   }
          // })
        }
      })
    },
  },
  created() {
    // this.showTag = JSON.parse(JSON.stringify(this.initTag))
  },
}
</script>

<style lang="less" scoped>
#page-postHelp {
  /deep/ .time {
    margin: 0.5rem 0;
    color: #888;
  }
  /deep/.item-img {
    display: block;
    height: 400px;
    width: 400px;
  }
}
</style>
